<template>
  <div>
    <div>
      <input type="button" value="导出数据" class="btn btn-danger" />
      <input type="text" placeholder="请输入手机号" />
      <input type="button" value="查询" class="btn btn-primary" />
    </div>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <td>名称</td>
          <td>密码</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list">
          <td>{{ item.ureadWord }}</td>
          <td>{{ item.passWord }}</td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
            <input type="button" value="详情" class="btn btn-danger" />
            <input type="button" value="冻结" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
//页面一打开就需要发送请求
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
let data = reactive({
  list: []
});
let { list } = toRefs(data);

//相当于文档就绪函数 但是在vue中是生命周期钩子函数
onMounted(() => {
  getList();
});

//获取数据列表
const getList = () => {
  axios({
    url: 'https://localhost:7157/api/JIUmemeelr/Show',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
